import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Tools,ActivityIndicator } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { DocumentTitle,TabPage,RouteLayout } from 'weaver-mobile-page';
import {controlEmTopNav,resetNavBar} from '../../util/pulic-func';
import { Switch, Route, Redirect } from 'react-router-dom'
import Submit from './Submit';
import AdvancedItem from './AdvancedItem';
require('../../public/icon/iconfont');   //解决刷新页面后 无法获取到图标的问题。
const getLabel = Tools.getLabel;


const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
    wrapProps = {
        onTouchStart: e => e.preventDefault(),
    };
}

@withRouter
@inject ('walletStore','baseStore')
@observer
class Wallet extends React.Component {
    constructor(props){
        super(props);

    }

    static defaultProps = {
        prefixCls:"fna-wallet"
    }

    componentWillMount(){
        const { baseStore } = this.props;
        const { getEquipmentFn } = baseStore;
        getEquipmentFn();
        
    }

    componentDidMount() {
        const { baseStore } = this.props;
        const { invoiceCloudInfo,getInvoiceCloudToken } = baseStore;

        if(invoiceCloudInfo.invoiceCloud == undefined){
            getInvoiceCloudToken({},()=>{
                this.initeFunction();
            });
        }else{
            this.initeFunction();
        }
        
    }

    componentDidUpdate() {
        const { location:{pathname},walletStore } = this.props;
        const {nowPath} = walletStore;

        if(nowPath !== pathname){
            this.changeTab(pathname);
        }
    }

    componentWillUnmount(){
        const {walletStore} = this.props;
        const {clearAllData} = walletStore;
        clearAllData();
        resetNavBar();//清除导航栏设置
    }

    initeFunction = () =>{
        const { walletStore,baseStore,location:{pathname} } = this.props;
        const { storeChangeTab,getTicketHolderTab,setLoading,setSelectKeyTop } = walletStore;  
        const { invoiceCloudInfo } = baseStore; 

        if(invoiceCloudInfo.invoiceCloud){
            controlEmTopNav({},()=>{this.props.history.push('/toWalletCloud?frame=controlEmTopNav') })
            getTicketHolderTab({},()=>{
                setLoading(false);
            });
			switch (pathname) {
                case "/wallet": setSelectKeyTop(0); break;
                case "/wallet/noSubmit": setSelectKeyTop(0); break;
                case "/wallet/alreadySubmit": setSelectKeyTop(1); break;
                case "/wallet/cancelSubmit": setSelectKeyTop(2); break;
                default: ;
            }
        }else{
            switch (pathname) {
                case "/wallet": storeChangeTab(0); break;
                case "/wallet/noSubmit": storeChangeTab(0); break;
                case "/wallet/alreadySubmit": storeChangeTab(1); break;
                case "/wallet/cancelSubmit": storeChangeTab(2); break;
                default: ;
            }
        }     
        
        
    }    

    render() {
        const { walletStore,prefixCls,baseStore,location:{pathname} } = this.props;
        const { tabs,loading,layout } = walletStore;
        const currentpage = this.getCurrentPage(pathname);

        return (
            <div className={`${prefixCls}`}>
                <DocumentTitle data={[{ match: /^\/wallet/i, title: () => getLabel(516434,'我的票夹') }]} defaultTitle="" />
                <ActivityIndicator
                    toast
                    text="Loading..."
                    animating={loading}
                />

                <div>
                    <TabPage
                        tabs={tabs}
                        defaultTabBarProps={{ page: 0 }}
                        tabProps={{ onChange: this.handleTabChange, page: currentpage }}//点击tab走这个方法////, page: currentpage
                        popover={false}
                        className={'fna-wallet-top-tabPage'}
                    />
                    <Switch>
                        <Route path="/wallet/noSubmit" component={Submit} />
                        <Route path="/wallet/alreadySubmit" component={Submit} />
                        <Route path="/wallet/cancelSubmit" component={Submit} />
                        <Redirect exact path="/wallet" to={{ pathname: '/wallet/noSubmit' }} />
                    </Switch>
                </div>
                <Route
                    key={layout.id}
                    path={layout.path}
                    render={() => (
                        <RouteLayout>
                            <div
                                key="wmPoutePageDemo"
                                className="wm-route-layout wm-demo-route-layout-page"
                            >
                                <AdvancedItem store={walletStore}/>
                            </div>
                        </RouteLayout>
                    )}
                />
               
            </div>
        )
    }  

    handleTabChange = (value) =>{
        const {walletStore,history,baseStore,location:{pathname}} = this.props;
        const {setSelectKeyTop,setStateParams,listViewPageData,setMark,setNameQuery} = walletStore;
        const {invoiceCloudInfo} = baseStore
        const {key} = value;

        setSelectKeyTop(key);
        history.push(value.pathname);
        if(invoiceCloudInfo.invoiceCloud === true) return;

        setStateParams({
            isSelect:false,
            allMoney:0,
            onRowSelect:[],
        });

        listViewPageData.selectNone();
        setMark({},true);
        setNameQuery('')
    }  
    

    changeTab = (pathname) => {
        const { walletStore } = this.props;
        const { setSelectKeyTop,getTicketHolderList,storeChangeTab } = walletStore;

        if(pathname === '/wallet'){
            setSelectKeyTop(0);
            storeChangeTab(walletStore.selectKeyTop)
        }else if(pathname === '/wallet/noSubmit'){
            setSelectKeyTop(0);
            storeChangeTab(walletStore.selectKeyTop)
        }else if(pathname === '/wallet/alreadySubmit'){
            setSelectKeyTop(1);
            storeChangeTab(walletStore.selectKeyTop)
        }else if(pathname === '/wallet/cancelSubmit'){
            setSelectKeyTop(2);
            storeChangeTab(walletStore.selectKeyTop)
        }
        
    }   

    //获取当前路由路径来确定当前是哪一个tab页
    getCurrentPage = (path) => {
        let num = 0;
        switch (path) {
            case '/wallet': num = 0; break;
            case '/wallet/noSubmit': num = 0; break;
            case '/wallet/alreadySubmit': num = 1; break;
            case '/wallet/cancelSubmit': num = 2; break;
            default:
        }
        return num;
    }    

}

export default Wallet;